import vuePlugin from 'rollup-plugin-vue';
import vueSFC from '@vue/compiler-sfc';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image';

// 参考：
// https://blog.csdn.net/weixin_46787337/article/details/128296721

// 指定组件名称
const ComponentList = ['TopComponent', 'AdComponent', 'BottomComponent', 'ProductComponent'];

function generateComponentConfig(componentName) {
  const key = componentName.toLowerCase();

  return {
    input: {
      [key]: `src/editor/${componentName}/index.js`
    },
    output: {
      entryFileNames: 'dist-[name].js',
      format: 'umd',
      dir: 'editor',
      name: componentName,
      globals: { vue: 'Vue' }
    },
    plugins: plugins,
    external: ['vue']
  };
}

const plugins = [
  nodeResolve(),
  commonjs(),
  babel(),
  vuePlugin({
    css: true, // 将样式注入到生成的 JS 中
    compileTemplate: true,
    preprocessStyles: true,
    style: {
      postcssPlugins: [autoprefixer()]
    },
    template: {
      compilerOptions: {
        compiler: vueSFC
      }
    }
  }),
  image(),
  postcss({
    plugins: [autoprefixer()]
  })
];

export default ComponentList.map((componentName) => generateComponentConfig(componentName));
